<template>
	<view class="comment">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+'px;'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>全部评论</span>
			</view>
		</header>
		<view class="list" v-for="val in list" :key="val.id">
			<header>
				<view>
					<image :src="URLimg+val.user_avatar" mode="aspectFill"></image>
					<p>
						<span>{{val.user_nick}}</span>
						<u-rate size="32" active-color="#D31E11" :readonly="true" :count="count"
							v-model="val.score"></u-rate>
					</p>
				</view>
				<span>{{val.create_time}}</span>
			</header>
			<p>{{val.evaluate}}</p>
			<view>
				<image @click="previewImg([URLimg+val])" mode="aspectFill" v-for="val in val.imgs" :key="val" :src="URLimg+val"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URLimg: this.URLimg,
				height: {},
				count: 5,
				value: 3,
				flag: true,
				page: 1,
				list: [],
				type: '',
				// 加载状态 loading加载中 nomore没有更多了 loadmore加载更多
				status: "loading",
				height: {},
			};
		},
		onLoad(res) {
			this.type = res.type
			this.id = res.id
			this.index()
			this.height = uni.getStorageSync('header')
		},
		// 触底刷新
		onReachBottom() {
			if (this.flag) {
				this.index()
			}
		},
		methods: {
			previewImg(urls) {
				uni.previewImage({
					urls,
					loop: true,
				})
			},
			retreat: (delta) => {
				uni.navigateBack({
					delta,
				});
			},
			index() {
				this.status = "loading"
				this.apifun.unirequest('/api/evaluate/index', 'post', {
					page: this.page,
					goods_id: this.id,
					goods_type: this.type,
				}, (res) => {
					this.status = "loadmore"
					if (res.data.last_page > res.data.current_page) {
						this.page++;
						this.flag = true
					} else {
						this.flag = false
						this.status = "nomore"
					}
					res.data.data.forEach(val => {
						if (val.img) {
							val.imgs = val.img.split(',')
						} else {
							val.imgs = []
						}
					})
					this.list.push(...res.data.data)
					uni.stopPullDownRefresh()
				}, true)
			}
		}
	}
</script>

<style lang="scss">
	.comment {
		padding-bottom: 40rpx;

		&>.list {
			width: 690rpx;
			padding: 16rpx 32rpx 32rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			margin: 20rpx auto 0;

			&>view {
				display: flex;
				flex-wrap: wrap;

				&>image:nth-child(3n) {
					margin-right: 0;
				}

				&>image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin: 0 18rpx 20rpx 0;
					@include cssimg;
				}
			}

			&>p {
				font-size: 14px;
				color: #9E9E9E;
				margin: 36rpx 0 30rpx;
			}

			&>header {
				display: flex;
				justify-content: space-between;

				&>span {
					font-size: 12px;
					color: #9E9E9E;
				}

				&>view {
					display: flex;

					&>p {
						font-size: 15px;
						font-weight: bold;
						display: flex;
						flex-direction: column;

						&>span {
							margin-bottom: 6rpx;
						}
					}

					&>image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 26rpx;
					}
				}
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>